import React, {useCallback} from 'react';
import {Text, Container, View} from 'native-base';
import {RectButton} from 'react-native-gesture-handler';
import {colors, size} from '@/config';
import {StyleSheet, Image} from 'react-native';
import NavigationService from '@/NavigationService';
import RefreshListView, {RefreshState} from '@/components/RefreshListView';
import GrayBar from '@/components/GrayBar';
import {useGlobal} from '@/utils/global-state';
const px = size.px;

export default function Order() {
  const [myVar, setMyVar] = useGlobal('GLOBAL_MYVAR', 0);

  const buyerOrderList = [
    {title: '1111', price: 2.3},
    {title: '2222', price: 12.3},
  ];
  const renderItem = useCallback((itemObj) => {
    const item = itemObj.item;
    return (
      <>
        <View style={styles.listItem}>
          <View style={styles.itemTitle}>
            <Image style={styles.img} source={{uri: item.sellerAvatar}} />
            <Text style={styles.name} numberOfLines={1}>
              {item.title}
            </Text>
            <Text style={styles.freight}>{item.price}</Text>
          </View>
        </View>
        <GrayBar />
      </>
    );
  }, []);

  return (
    <Container>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>订单中心</Text>
      </View>
      <View style={styles.title}>
        <Text style={styles.checkedBt}>在途订单</Text>
        <RectButton
          onPress={() => {
            NavigationService.navigate('SalesOrder');
          }}>
          <Text style={styles.unCheckedBt}>已签收</Text>
        </RectButton>
      </View>

      <RefreshListView
        data={buyerOrderList}
        keyExtractor={(_, index) => `${index}`}
        renderItem={renderItem}
        refreshState={RefreshState.Idle}
        onHeaderRefresh={() => {}}
        onFooterRefresh={() => {}}
      />
    </Container>
  );
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: px(45),
    backgroundColor: '#FFFFFF',
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontFamily: 'PingFang SC',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: px(18),
    lineHeight: px(24),
    letterSpacing: px(-0.313529),
    color: '#000000',
  },
  title: {
    flexDirection: 'row',
    borderColor: colors.primary,
    borderWidth: 1,
    borderRadius: 4,
  },
  checkedBt: {
    color: colors.white,
    backgroundColor: colors.primary,
    fontSize: px(16),
    fontWeight: '600',
    paddingHorizontal: 8,
    paddingVertical: 6,
  },
  unCheckedBt: {
    color: colors.primary,
    fontSize: px(16),
    paddingHorizontal: 8,
    paddingVertical: 6,
  },
  listItem: {
    paddingHorizontal: px(16),
  },
  itemTitle: {
    flexDirection: 'row',
    paddingVertical: px(10),
    alignItems: 'center',
    justifyContent: 'space-between',
    borderBottomColor: colors.borderBottomColor,
    borderBottomWidth: 1,
  },
  img: {
    height: px(24),
    width: px(24),
    borderRadius: px(12),
    marginRight: 8,
  },
  name: {
    flex: 1,
    fontSize: px(18),
    fontWeight: '600',
  },
  freight: {
    color: colors.tableFont,
    fontSize: px(12),
    marginHorizontal: 4,
  },
  handleBt: {
    paddingVertical: 4,
    paddingHorizontal: 8,
    color: colors.tableFont,
    borderColor: colors.tableFont,
    borderWidth: 1,
    borderRadius: 4,
  },
  payBt: {
    color: colors.red,
    borderColor: colors.red,
    marginLeft: 3,
  },
  deliverBt: {
    color: colors.primary,
    borderColor: colors.primary,
  },
});
